<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-01 11:52:50
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-16 08:47:16
-->
<template>


    <!-- 项目 -->
    <div>
        <div class="content">
            <div class="picinfo">
                    <div class="picinfo_top">
                        web简介
                    </div>
                <div class="picinfo_bottom">
                    <span>
                        <br>
                        web前端开发包括HTML5、css3、js等多方面的技术。
                        <br>
                        对于普通的用户来说，web仅仅只是一种环境——互联网的使用环境、氛围、内容等；而对于网站制作、设计者来说，它是一系列技术的复合总称(包括网站的前台布局、后台程序、美工、数据库领域等等的技术概括性的总称)。</span>
                </div>
            </div>
        </div>
            <div class="cd-container">
                <h2>web前端开发的主要技术</h2>
                <ul>
                        <li>HTML：全称“Hyper Text Markup Language（超文本标记语言）”，它是一门描述性语言，我们看到的网页就是用HTML语言制作的</li>
                        <li>Css：全称“层叠样式表”，我们在别的地方看到的“层叠样式”、“css样式”指的就是css</li>
                        <li> JavaScript：一门脚本语言</li>
                        <li>ajax：又被叫做“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术</li>
                        <li>Query:是一个快速、简洁的JavaScript框架,封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式</li>
                        <li>Bootstrap：是一种简洁、直观、强悍的前端开发框架</li>
                        <li> React ：Facebook 内部开源出来的一个前端 UI 开发框架</li>
                        <li>ElementUI：一款基于Vue.js 2.0 的桌面端UI框架</li>
                </ul>
                <h2>web前端的发展历程</h2>
                <div class="csdn-digitalinfo">
                    <div style="color: #FF6C46;" class="title">1946年</div>
                    <div style="color: #4D4D4D;" class="content1">第一台计算机“ENIAC”诞生</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #5A9BEF;" class="title">1969年</div>
                    <div style="color: #4D4D4D;" class="content1">阿帕网被建立</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #FFBB00;" class="title">1983年</div>
                    <div style="color: #4D4D4D;" class="content1">TCP/IP协议出现</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #A0D75D;" class="title">1990年</div>
                    <div style="color: #4D4D4D;" class="content1">WWW的诞生</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #FF6C46;" class="title">1992年</div>
                    <div style="color: #4D4D4D;" class="content1">浏览器的诞生</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #FF6C46;" class="title">1994年</div>
                    <div style="color: #4D4D4D;" class="content1">W3C理事会成立</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #5A9BEF;" class="title">1995年</div>
                    <div style="color: #4D4D4D;" class="content1">JavaScript的诞生</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #FFBB00;" class="title">1998年</div>
                    <div style="color: #4D4D4D;" class="content1">Web1.0升级到了Web2.0</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #A0D75D;" class="title">2004年</div>
                    <div style="color: #4D4D4D;" class="content1">Gmail浏览器的出现</div>
                </div>
                <div class="csdn-digitalinfo">
                    <div style="color: #FF6C46;" class="title">2006年</div>
                    <div style="color: #4D4D4D;" class="content1">jQuery被发布</div>
                </div>
            </div>
        <Footer></Footer>    
    </div>
    
    <!-- /项目 -->

</template>


    <style scoped>
  
        .content{
            width: 1519.2px;
            height: 650px;
            /* border: 1px solid yellow; */
            background-image: url(../../public/images/web2.webp);
            background-size: 100% 100%;
            
        }

        .picinfo{
            margin:0px auto 40px;
            width: 900px;
            height: 48px;
            /* border: 1px red solid; */
            padding-top: 168px;
            text-shadow: 0 1px 3px rgb(0 0 0 / 30%);
            color: #fff;

        }
        .picinfo_top{
           margin-top: 200px;
           width: 900px;
           height: 75px; 
           /* border: 1px solid blue; */
           font-size: 42px;
           color: rgb(243, 142, 11);
           font-weight: bold;
        }
        .picinfo_bottom{
            width: 900px;
            height: 100px;
            border-top: 2px solid #d40a2c;
            font-size: 22px;
            color: rgb(245, 229, 8);
            font-weight:bold  ;
        }
        .cd-container{
            width: 900px;
            height: 722px;
            /* border: 1px solid red; */
            font-size: 16px;
            margin: 22.5px 305px 0 305px;
        }
        .cd-container h2{
            height: 45px;
            font-size: 1.5em;
            display: inline-block;
            width: 100%;
            margin: 1em 0 0 0;
            color: #4d4d4d;
            border-bottom: 1px #ccc solid;
        }
        .cd-container ul{
            list-style: none;
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            white-space: nowrap;
        }
        .cd-container ul li{
            display: block;
            height: 30px;
            color: #7A7C7A;
            line-height: 30px;
        }
        .cd-container ul+h2{
            display: block;
            margin-top: 287.5px ;
        }
        .csdn-digitalinfo{
            width: 18%;
            padding: 0 8px;
            min-height: 45px;
            float: left;
            margin: 24px 0;
        }
        .title{
            width: 164px;
            height: 30px;
            /* border: blue 1px solid; */
            font-size: 24px;
            line-height: 30px;
        }
        .content1{
            width: 164px;
            height: 70px;
            /* border: 1px solid red; */
        }
    </style>
<script>
import Footer from "./components/Footer";
export default {
    components:{Footer},
}
</script>
